<template>
  <div class="main">
    <div v-if="myClient.length>0">
      <ul>
        <li v-for="(item, index) in myClient" :key="index">
          <div class="left">
            <div class="left-top">
              <div
                v-if="item.auditStatus === 'PASS'"
                class="status"
                style="background: url('https://qinghe-zichan.oss-cn-shanghai.aliyuncs.com/imgs/collect.png') no-repeat; background-size: 100% 100%;width:65px"
              >审核通过</div>
              <div
                v-else
                class="status"
                style="background: url('https://qinghe-zichan.oss-cn-shanghai.aliyuncs.com/imgs/unstart.png') no-repeat; background-size: 100% 100%;"
              >审核中</div>
              <span class="name">{{item.customerName}}</span>
            </div>
            <div class="left-middle" style="padding:10px 0">
              <i
                class="iconfont icondianhua"
                style="margin-right:6px;color: rgba(107, 107, 107, 1);"
              ></i>
              <span class="phone">{{item.phone}}</span>
            </div>
            <div class="left-bottom">
              <i
                class="iconfont iconzhengjian"
                style="margin-right:6px;color: rgba(107, 107, 107, 1);"
              ></i>
              <span class="card">{{item.certificateNumber}}</span>
            </div>
          </div>
          <div class="right" style="margin-top:5px">
            <div class="right-top" @click="goClientDetail(item)">查看详情</div>
            <div class="right-bottom" @click="goCertification(item.id)">实名认证</div>
          </div>
        </li>
      </ul>
      <div class="store_footer" v-if="!loadMore">—— 已经到底啦 ——</div>
    </div>
    <div v-else>
      <notDatas item="暂无客户" />
    </div>

    <div class="bottom">
      <button @click="addClient">新增客户</button>
    </div>
  </div>
</template>

<script>
import { myCustomer } from "@/api/api";
import notDatas from "@/components/notDatas";
export default {
  props: {},
  data() {
    return {
      loadMore: true,
      myClient: [],
      pages: {
        pageIndex: 1,
        pageSize: 10
      }
    };
  },
  computed: {},
  created() {},
  mounted() {
    // 可以将当前状态的data重置为初始状态
    // this.myCustomer();
    console.log(this.myClient, "ttttttttttt");
  },
  onLoad() {
    Object.assign(this.$data, this.$options.data());
    this.myCustomer();
  },
  // 上拉加载更多
  onReachBottom() {
    this.myCustomer();
  },
  // 下拉刷新
  onPullDownRefresh() {
    this.myClient = [];
    this.pages.pageIndex = 1;
    this.loadMore = true;
    this.myCustomer();
    // 停止下拉刷新
    wx.stopPullDownRefresh();
  },
  watch: {},
  methods: {
    /** 我的客户分页 */
    async myCustomer() {
      if (this.loadMore) {
        await myCustomer(this.pages).then(res => {
          if (!res.code) {
            this.myClient = this.myClient.concat(res.list);
            ++this.pages.pageIndex;
            if (res.pages < this.pages.pageIndex) {
              this.loadMore = false;
            }
          }
        });
      }
    },
    // 跳转新增用户页面redirectTo
    addClient() {
      wx.redirectTo({
        url: "/pages/PersonalCenter/userChildren/addClient/main"
      });
    },
    // 跳转实名认证页面
    goCertification(id) {
      wx.navigateTo({
        url: "/pages/PersonalCenter/userChildren/certification/main?id=" + id
      });
    },
    // 跳转客户详情页面
    goClientDetail(item) {
      console.log(item, "ttttttttt");
      if (item.auditStatus !== "PASS") {
        wx.showToast({
          title: "审核未通过",
          icon: "none",
          duration: 2000
        });
      } else {
        wx.navigateTo({
          url: `/pages/PersonalCenter/userChildren/clientDetail/main?id=${
            item.id
          }&customerName=${item.customerName}&phone=${
            item.phone
          }&certificateNumber=${item.certificateNumber}`
        });
      }
    }
  },
  components: { notDatas }
};
</script>

<style scoped lang="less">
.main {
  background: rgba(255, 255, 255, 1);
}
ul {
  padding: 25px 15px 0;
  display: flex;
  flex-direction: column;
  margin-bottom: 15px;
  li {
    padding: 15px;
    display: flex;
    justify-content: space-between;
    box-shadow: 0px 0px 20px 0px rgba(2, 6, 4, 0.06);
    margin-bottom: 10px;
    .left {
      display: flex;
      flex-direction: column;
      .left-top,
      .left-bottom,
      .left-middle {
        display: flex;
        align-items: center;
        .status {
          width: 47px;
          height: 20px;
          font-size: 10px;
          font-family: PingFangSC-Medium, PingFangSC;
          font-weight: 500;
          color: rgba(255, 255, 255, 1);
          line-height: 20px;
          text-indent: 6px;
          margin-right: 6px;
        }
        .name {
          font-size: 17px;
          font-family: PingFangSC-Medium, PingFangSC;
          font-weight: 700;
          color: rgba(2, 6, 4, 1);
          line-height: 24px;
        }
      }
      .phone,
      .card {
        font-size: 13px;
        font-family: PingFangSC-Regular, PingFangSC;
        font-weight: 400;
        color: rgba(107, 107, 107, 1);
        line-height: 18px;
      }
    }
    .right {
      border-radius: 2px;
      font-size: 12px;
      font-family: PingFangSC-Regular, PingFangSC;
      font-weight: 400;
      color: rgba(255, 255, 255, 1);
      line-height: 31px;
      .right-top {
        padding: 0 16px;
        background: rgba(24, 119, 152, 1);
        margin-bottom: 10px;
      }
      .right-bottom {
        border-radius: 2px;
        border: 1px solid rgba(24, 119, 152, 1);
        color: rgba(24, 119, 152, 1);
        padding: 0 16px;
        background: #fff;
      }
    }
  }
}
.store_footer {
  height: 18px;
  line-height: 18px;
  text-align: center;
  font-size: 13px;
  font-weight: 400;
  color: #b8bab9;
  margin-bottom: 95px;
}
.bottom {
  position: fixed;
  bottom: 0;
  padding-top: 6px;
  border-top: 0.5px solid #e6e6e6;
  width: 100%;
  z-index: 99;
  background: #fff;
  button {
    border-radius: 2px;
    font-size: 15px;
    font-family: PingFangSC-Medium, PingFangSC;
    font-weight: 500;
    line-height: 42px;
    margin: 0 15px 6px;
    background: rgba(24, 119, 152, 1);
    color: rgba(255, 255, 255, 1);
  }
}
</style>
